<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>要你的命</title>
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			@media screen and (min-width:980px){
				.title{
					width: 400px;
					text-align: center;
					color: #f55;
					margin-top: 50px;
					margin-left: 200px;
				}
				.header{
					margin-left: 200px;
					margin-bottom: 10px;
					width: 408px;
					display: flex;
					justify-content: space-between;
				}
				.header button{
					border: none;
					outline: none;
				}
				.sp{
					width: 30px;
					text-align: center;
					color: #f44;
					outline: none;
					font-weight: 700;
				}
				.header button:hover{
					background-color: #0bf;
					color: #fff;
				}
				.outer{
					margin-left: 200px;
					width: 408px;
					height:408px;
					font-size: 0;
					border: 1px solid red;
					border-top: 0px;
					border-left: 0px;
				}
				.son{
					display: inline-block;
					box-sizing: border-box;
					width: 8px;
					height: 8px;
					background-color: #FFFFFF;
					border-top: 1px  solid red;
					border-left: 1px  solid red;
				}
				.son1{
					display: inline-block;
					box-sizing: border-box;
					width: 8px;
					height: 8px;
					font-size: 0;
					border-top: 1px  solid red;
					border-left: 1px  solid red;
					background-color: #f77;
				}
			}
			@media screen and (max-width:980px){
				.title{
					width: 100vw;
					font-size: 24px;
					margin: 0;
					padding: 0;
					text-align: center;
					color: #0af;
					margin-top: 4vh;
				}
				.header{
					width: 80vw;
					margin:10px auto;
					font-size: 16px;
					display: flex;
					margin-top: 5vh;
					justify-content: space-between;
				}
				.header button{
					font-size: 20px;
					padding: 2px;
					color: #f44;
					border: none;
					outline: none;
				}
				.sp{
					width: 5vw;
					text-align: center;
					color: #f44;
					outline: none;
					font-weight: 700;
				}
				.header button:hover{
					background-color: #0bf;
					color: #fff;
				}
				.outer{
					margin: auto;
					margin-top: 2vh;
					width: 91.8vw;
					height:91.8vw;
					font-size: 0;
					border: 1px solid red;
					border-top: 0px;
					border-left: 0px;
				}
				.son{
					display: inline-block;
					box-sizing: border-box;
					width: 1.8vw;
					height: 1.8vw;
					border-top: 1px  solid red;
					border-left: 1px  solid red;
					background-color: #FFFFFF;
				}
				.son1{
					display: inline-block;
					box-sizing: border-box;
					width: 1.8vw;
					height: 1.8vw;
					font-size: 0;
					border-top: 1px  solid red;
					border-left: 1px  solid red;
					background-color: black;
				}
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h2 class="title">要你的命</h2>
            <a href="./draw/index.html">来画画呀</a>
            <a href="./scanf/index.html">来扫雷呀</a>
			<div class="header">
				<button type="button" @click="lifeBegin()">走两步</button>
				<div>
					<input class="sp" type="text" v-model="speed" /><span>(ms)</span>
					<button type="button" @click="endLess()">开始跑</button>
				</div>
				<button type="button" @click="stopendLess()">别跑了</button>
				<!-- <button type="button" @click="kk()">test</button> -->
			</div>
			<div class="outer">
				<div :class="'son'+(items==1?1:'')" v-for="(items,ind) in son" @click="addSon(ind)"></div>
			</div>
		</div>
		<script type="text/javascript">
			window.onload = function(){
				let vue = new Vue({
					el:"#app",
					data:{
						son:new Array(2601),
						end:null,
						speed:100
					},
					created() {
						this.creatSon()
					},
					methods:{
						creatSon(){
							this.son[1095] = 1
							this.son[1094] = 1
							this.son[1044] = 1
							this.son[1042] = 1
							this.son[993]  = 1
						},
						// 绘制
						addSon(ind){
							let arr = this.son
							if(arr[ind]!==1){
								arr[ind] = 1
							}else{
								arr[ind] = null
							}
							console.log(ind,arr[ind])
							this.son = [...arr]
						},
						endLess(){
							clearInterval(this.end)
							this.end=setInterval(this.lifeBegin,this.speed)
						},
						stopendLess(){
							clearInterval(this.end)
						},
						lifeBegin(){
							let arr = new Array(2601)
							for(let i=0;i<2601;i++){
								let flag = 0
								for(j=-1;j<2;j++){
									for(let k=-1;k<2;k++){
										let p = i+j*51+k
										if(p<0){
											p = 2601 + p 
										}else if(p>2600){
											p = (i+j*51+k)%2601
										}
										if(this.son[p]==1){
											flag+=1
										}
									}
								}
								if(flag>2&&flag<5){
									if(flag==4){
										arr[i] =  this.son[i]
									}else{
										arr[i] = 1
									}
								}
								
							}
							this.son = arr
						}
					}
				})
			}
		</script>
	</body>
</html>
